<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="description" content="Responsive Web UI Kit &amp; Dashboard Template based on Bootstrap">
    <meta name="author" content="AdminKit">
    <meta name="keywords" content="adminkit, bootstrap, web ui kit, dashboard template, admin template">

    <link rel="shortcut icon" href="/img/icons/icon-48x48.png"/>

    <title>Blank Page</title>

    <link href="/css/app.css" rel="stylesheet">

    <style>
        .content .row .command-title {
            padding-bottom: 0;
        }
        .content .row .command-info {
            padding-top: 5px;
        }

        .content .row .info-title {
            display: inline-block;
        }

        .content .row .img-title {
            padding: 15px 0;
        }

        .content .row .avatar {
            width: 100px;
            height: 100px;
        }

        .content .row .add-img {
            cursor: pointer;
            float: left;
            width: 100px;
            height: 100px;
            border-radius: 5px;
            margin-right: 15px;
        }

        .content .row .add-img:hover {
            background-color: #E2DEDD;
        }

        .content .row .add-img div {
            text-align: center;
            line-height: 100px;
        }

        .content .row .img-content img {
            margin-right: 15px;
        }

        .content .row .command-info .form-group {
            padding: 0;
        }

        .show-down {
            display: none;
        }

        .content #success-msg {
            margin: 15px 0;
        }
    </style>
</head>

<body>
<div class="wrapper">
    <nav id="sidebar" class="sidebar">
        <div class="sidebar-content js-simplebar">
            <a class="sidebar-brand" href="#">
                <span class="align-middle">Bridge</span>
            </a>

            <ul class="sidebar-nav">
                <li class="sidebar-header">
                    Pages
                </li>

                <li class="sidebar-item">
                    <a class="sidebar-link" href="/caseAnal/index">
                        <i class="align-middle" data-feather="sliders"></i>
                        <span class="align-middle">案件审核</span>
                    </a>
                </li>

                <li class="sidebar-item active">
                    <a class="sidebar-link" href="/caseAnal/viewCommand">
                        <i class="align-middle" data-feather="sliders"></i>
                        <span class="align-middle">指挥处理</span>
                    </a>
                </li>

                <li class="sidebar-header">
                    Account
                </li>

                <li class="sidebar-item">
                    <a class="sidebar-link" href="#">
                        <i class="align-middle" data-feather="sliders"></i>
                        <span class="align-middle">退出登录</span>
                    </a>
                </li>
            </ul>
        </div>
    </nav>

    <div class="main">
        <nav class="navbar navbar-expand navbar-light navbar-bg">
            <a class="sidebar-toggle d-flex">
                <i class="hamburger align-self-center"></i>
            </a>

            <form class="form-inline d-none d-sm-inline-block">
                <div class="input-group input-group-navbar">
                    <input type="text" class="form-control" placeholder="Search…" aria-label="Search">
                    <div class="input-group-append">
                        <button class="btn" type="button">
                            <i class="align-middle" data-feather="search"></i>
                        </button>
                    </div>
                </div>
            </form>

            <div class="navbar-collapse collapse">
                <ul class="navbar-nav navbar-align">
                    <li class="nav-item dropdown">
                        <a class="nav-icon dropdown-toggle d-inline-block d-sm-none" href="#" data-toggle="dropdown">
                            <i class="align-middle" data-feather="settings"></i>
                        </a>

                        <a class="nav-link dropdown-toggle d-none d-sm-inline-block" href="#" data-toggle="dropdown">
                            <img src="/img/avatars/avatar.jpg" class="avatar img-fluid rounded mr-1" alt="Charles Hall"/>
                            <span class="text-dark">j2ee</span>
                        </a>
                        <div class="dropdown-menu dropdown-menu-right">
                            <a class="dropdown-item" href="pages-profile.html"><i class="align-middle mr-1"
                                                                                  data-feather="user"></i> 用户信息</a>
                            <a class="dropdown-item" href="#"><i class="align-middle mr-1" data-feather="pie-chart"></i>
                                数据分析</a>
                            <div class="dropdown-divider"></div>
                            <a class="dropdown-item" href="pages-settings.html"><i class="align-middle mr-1"
                                                                                   data-feather="settings"></i> 设置
                            </a>
                            <a class="dropdown-item" href="#"><i class="align-middle mr-1"
                                                                 data-feather="help-circle"></i> 帮助中心</a>
                            <div class="dropdown-divider"></div>
                            <a class="dropdown-item" href="#">退出登录</a>
                        </div>
                    </li>
                </ul>
            </div>
        </nav>

        <main class="content">
            <div class="container-fluid p-0">

                <h1 class="h3 mb-3 ">指挥命令发送</h1>

                <div class="row">
                    <div class="col-12">
                        <div class="card">
                            <div class="card-header command-title">
                                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-clipboard align-middle mr-2"><path d="M16 4h2a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h2"></path><rect x="8" y="2" width="8" height="4" rx="1" ry="1"></rect></svg>
                                <h5 class="card-title mb-0 info-title">指挥信息完善</h5>
                            </div>
                            <div class="card-body command-info">
                                <div >
                                    <textarea class="form-control" placeholder="请填写指挥指令" rows="4"></textarea>
                                </div>
                                <div>
                                    <div class="img-title">
                                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-image align-middle mr-2"><rect x="3" y="3" width="18" height="18" rx="2" ry="2"></rect><circle cx="8.5" cy="8.5" r="1.5"></circle><polyline points="21 15 16 10 5 21"></polyline></svg>
                                        <h5 class="card-title mb-0 info-title">图片信息完善</h5>
                                    </div>
                                    <div class="img-content">
                                        <img src="/img/fbh.jpg" class="avatar img-fluid rounded mr-1" alt="Charles Hall">
                                        <div class="add-img">
                                            <div title="添加图片信息">
                                                <svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-folder-plus align-middle mr-2"><path d="M22 19a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h5l2 3h9a2 2 0 0 1 2 2z"></path><line x1="12" y1="11" x2="12" y2="17"></line><line x1="9" y1="14" x2="15" y2="14"></line></svg>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div>
                                    <div class="img-title">
                                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-user align-middle mr-2"><path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"></path><circle cx="12" cy="7" r="4"></circle></svg>
                                        <h5 class="card-title mb-0 info-title">发送人选择</h5>
                                    </div>
                                    <div>
                                        <div class="form-group col-md-4">
                                            <label for="inputState">发送给: </label>
                                            <select id="inputState" class="form-control">
                                                <option selected="">所有成员</option>
                                                <option>赵明</option>
                                                <option>李秋</option>
                                                <option>古飞扬</option>
                                                <option>北圳南</option>
                                                <option>聆牧笛</option>
                                            </select>
                                        </div>
                                    </div>
                                </div>
                                <div>
                                    <button class="btn btn-outline-primary send-msg">发送指令</button>
                                </div>
                                <div class="show-down" id="success-msg">
                                    <div class="alert alert-success alert-dismissible" role="alert">
                                        <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                                            <span aria-hidden="true">×</span>
                                        </button>
                                        <div class="alert-message">
                                            <h4 class="alert-heading">发送成功！</h4>
                                            <p>指挥消息已经成功发送到指定队员的手中！可以选择再次发送，也可以结束本次发送。</p>
                                            <hr>
                                            <div class="btn-list">
                                                <button class="btn btn-outline-primary okay-btn">好的，知道了</button>
                                            </div>
                                        </div>
                                    </div>
                                </div>


                            </div>
                        </div>
                    </div>
                </div>

            </div>
        </main>

        <footer class="footer">
            <div class="container-fluid">
                <div class="row text-muted">
                    <div class="col-6 text-left">
                        <p class="mb-0">
                            <a href="index.html" class="text-muted"><strong>Bridge Rescue System</strong></a> &copy;
                        </p>
                    </div>
                    <div class="col-6 text-right">
                        <ul class="list-inline">
                            <li class="list-inline-item">
                                <a class="text-muted" href="#">Support</a>
                            </li>
                            <li class="list-inline-item">
                                <a class="text-muted" href="#">Help Center</a>
                            </li>
                            <li class="list-inline-item">
                                <a class="text-muted" href="#">Privacy</a>
                            </li>
                            <li class="list-inline-item">
                                <a class="text-muted" href="#">Terms</a>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
        </footer>
    </div>
</div>

<script src="/js/vendor.js"></script>
<script src="/js/app.js"></script>

<script src="/js/jquery-3.5.1.js"></script>
<script>
    $(function () {
        $('.content .row .send-msg').on('click', function () {
            $('#success-msg').attr('class', 'show-up');
        });

        $('.content .row .okay-btn').on('click', function () {
            $('#success-msg').attr('class', 'show-down');
        });
    });
</script>

</body>

</html>